import { useRef } from 'react';
import styles from './main.less';
import Nav from './Nav';
import Banner from './Banner/Banner2';

const Main = () => {
  const input = useRef(null);
  const searchClick = () => {
    const input_: any = input.current;
    if (input_) {
      const value = input_.value;
      alert(value);
    }
  };
  const onKeyDown: (e: any) => void = (e) => {
    const keyCode = e.keyCode;
    // Enter
    if (keyCode === 13) {
      searchClick();
    }
  };
  return (
    <>
      <div className={styles.Main}>
        <div className={styles.Main_img}>
          <img src="//image.benlailife.com/webStatic/images/n_top/n_logo_b20f2ffe.gif" />
        </div>

        <div className={styles.Main_search}>
          <div className={styles.search_box}>
            <input
              type="text"
              placeholder="智利车厘子收官季"
              ref={input}
              autoFocus
              onKeyDown={onKeyDown}
            />
            <a onClick={searchClick}></a>
          </div>
          <div className={styles.search_word}>
            <em>简爱</em>
            <em>鲜花</em>
            <em>车厘子</em>
            <em>三文鱼</em>
            <em>饺子</em>
            <em>榴莲</em>
            <em>蓝莓</em>
            <em>红薯</em>
            <em>椰青</em>
          </div>
        </div>

        <div className={styles.Main_my}>
          <dl>
            <dt>
              <a>
                <s></s>
                我的本来
              </a>
              <div className={styles.Main_dt_bottom}></div>
            </dt>
            <dd className={styles.Main_dl_dd}>
              <div className={styles.Main_dl_dd_header}>
                您好,请
                <span className={styles.Main_dl_dd_header_login}>[登录]</span>
              </div>
              <ul className={styles.Main_dl_dd_box}>
                <li className={styles.Main_dl_dd_box_item}>
                  <a>待处理订单(0)</a>
                  <a>我的订单 &gt;</a>
                </li>
                <li className={styles.Main_dl_dd_box_item}>
                  <a>待支付订单(0)</a>
                  <a>我的宅配 &gt;</a>
                </li>
                <li className={styles.Main_dl_dd_box_item}>
                  <a>待评价商品(0)</a>
                  <a>我的积分 &gt;</a>
                </li>
                <li className={styles.Main_dl_dd_box_item}>
                  <a>优惠券(0)</a>
                  <a>我的退货 &gt;</a>
                </li>
              </ul>
            </dd>
          </dl>
        </div>

        <div className={`${styles.Main_my} ${styles.Main_gwc}`}>
          <dl>
            <dt>
              <div className={styles.headerCardCount}>2</div>
              <a>
                <s></s>
                购物车
              </a>
              <div className={styles.Main_dt_bottom}></div>
            </dt>
            <dd className={styles.Main_dl_dd}>
              <ol>
                <li title="【供货商直发】棘鲜丰沙棘汁饮料248ml*24">
                  {/* 左侧图片 */}
                  <div className={styles.Main_dl_dd_pic}>
                    <a>
                      <img
                        src="https://image8.benlailife.com/ProductImages/medium/dd2ee2fb-a220-4955-8693-6b3f3e53e2c2.jpg"
                        alt=""
                      />
                    </a>
                  </div>
                  <div className={styles.Main_dl_dd_name}>
                    <a>【供货商直发】棘鲜丰沙棘汁饮料248ml*24</a>
                  </div>
                  <div className={styles.Main_dl_dd_price}>
                    ￥98
                    <div>
                      <span>×</span>2
                    </div>
                  </div>
                </li>
              </ol>
              <div className={styles.buy}>
                <p>
                  共<span className={styles.number}>2</span>
                  件商品 &nbsp;&nbsp; 共计:&nbsp;&nbsp;
                  <span className={styles.price}>￥196.00</span>
                </p>
                <div className={styles.help}>
                  <span>此金额尚未计入优惠、折扣部分</span>
                  <a>去结算</a>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <Nav />
      <Banner />
    </>
  );
};

export default Main;
